<template>
  <div class="newsinfo-container">
    <!-- 获取地址栏 id： {{$route.params.id}} -->
    <h3 class="title">{{newsinfo.title}}</h3>
    <p class="subtitle">
      <span>发表时间:{{newsinfo.add_time|dateFormat}}</span>
      <span>点击：{{newsinfo.click}}次</span>
    </p>
    <hr />
    <!-- 这样写 content 里的 标签不会被解析 -->
    <!-- <div class="content">{{newsinfo.content}}</div> -->
    <div class="content" v-html="newsinfo.content"></div>
    <comment-box :id="this.id"></comment-box>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import comment from '../subcomponents/comment.vue'
export default {
  data() {
    return {
      // 获取地址栏 id
      id: this.$route.params.id,
      newsinfo: {} //新闻对象
    };
  },
  created() {
    this.getNewsInfo();
  },
  methods: {
    getNewsInfo() {
      //获取新闻详情
      this.$http.get("api/getnew/" + this.id).then(result => {
        if (result.body.status === 0) {
          this.newsinfo = result.body.message[0];
        } else {
          Toast("获取新闻失败！");
        }
      });
    }
  },
  components:{
      'comment-box':comment,
  }
};
</script>

<style lang="scss" scoped>
.newsinfo-container {
  padding: 5px;
  .title {
    text-align: center;
    color: indianred;
    font-weight: 500;
    font-size: 17px;
  }
  .subtitle {
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    justify-content: space-between;
  }
  .content p {
    // 设置不了样式？？？？
    color: #000;
  }
}
</style>
<style lang="scss">
.newsinfo-container {
  .content p {
    color: black;
  }
}
</style>